<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
<html>
<head>
    <title>评教统计</title>
</head>
<body>
<!-- 主题切换按钮 -->
<button onclick="toggleTheme()" class="theme-toggle" style="
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 10px 15px;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
">
    🌙/☀️
</button>
<h2>我的课程评教统计</h2>
<a href="rDBDashboard.jsp" class="btn btn-light btn-sm">
    <i class="bi bi-arrow-left"></i> 返回仪表盘
</a>
<a href="evaluation?action=export">导出Excel</a>

<c:forEach items="${stats}" var="courseStat" varStatus="loop">
    <!-- 每个课程的图表容器 -->
    <div class="chart-container" id="chart-${loop.index}"></div>
</c:forEach>

<c:forEach items="${stats}" var="courseStat">
    <h3>${courseStat.key.courseName}</h3>
    <table border="1">
        <tr>
            <th>评价维度</th>
            <th>平均分</th>
        </tr>
        <c:forEach items="${courseStat.value}" var="dimStat">
            <tr>
                <td>${dimStat.key}</td>
                <td>${String.format("%.2f", dimStat.value)}</td>
            </tr>
        </c:forEach>
    </table>

    <h4>文字评价</h4>
    <ul>
        <c:forEach items="${comments[courseStat.key]}" var="comment">
            <li>${comment}</li>
        </c:forEach>
    </ul>
</c:forEach>
</body>
</html>
<link href="./css/rDBEval_stats.css" rel="stylesheet" type="text/css">
<script>

    document.addEventListener('DOMContentLoaded', function() {
        <c:forEach items="${stats}" var="courseStat" varStatus="loop">
        // 提取当前课程数据
        const data${loop.index} = [
            <c:forEach items="${courseStat.value}" var="dimStat">
            { name: '${dimStat.key}', value: ${dimStat.value} },
            </c:forEach>
        ];

        // 初始化图表
        const chart${loop.index} = echarts.init(document.getElementById('chart-${loop.index}'));

        // 配置选项（暗黑主题适配）
        const option${loop.index} = {
            title: {
                text: '${courseStat.key.courseName} - 评价维度分布',
                textStyle: {
                    color: '#c5a47e',
                    fontSize: 16,
                    fontWeight: 'bold'
                },
                left: 'center' // 标题居中
            },
            tooltip: {
                trigger: 'axis',
                backgroundColor: '#2d2d2d',
                borderColor: '#3d3d3d',
                textStyle: {
                    color: '#e0e0e0',
                    fontSize: 12
                },
                axisPointer: {
                    type: 'shadow', // 阴影指示器
                    shadowStyle: {
                        color: 'rgba(197, 164, 126, 0.1)' // 金色弱阴影
                    }
                }
            },
            grid: {
                left: '5%',    // 减少左侧留白
                right: '5%',   // 减少右侧留白
                bottom: '15%', // 底部留出标签空间
                top: '18%',    // 顶部增加标题间距
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: data${loop.index}.map(item => item.name),
                axisLabel: {
                    color: '#b08f6a',
                    fontSize: 12,
                    rotate: 45, // 标签倾斜45度防重叠
                    margin: 15   // 标签与轴线间距
                },
                axisLine: {
                    lineStyle: {
                        color: '#3d3d3d',
                        width: 1
                    }
                },
                axisTick: {
                    show: false // 隐藏刻度线
                }
            },
            yAxis: {
                type: 'value',
                min: 0,
                max: 5, // 固定评分范围0-5
                axisLabel: {
                    color: '#b08f6a',
                    fontSize: 12
                },
                axisLine: {
                    lineStyle: {
                        color: '#3d3d3d',
                        width: 1
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#2d2d2d',
                        opacity: 0.5 // 网格线半透明
                    }
                }
            },
            series: [{
                name: '平均分',
                type: 'bar',
                data: data${loop.index},
                barWidth: 24, // 柱体宽度调窄
                barCategoryGap: '30%', // 柱体间距增大
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(197, 164, 126, 0.9)' }, // 顶部金色
                        { offset: 1, color: 'rgba(140, 100, 70, 0.9)' }   // 底部深金
                    ]),
                    borderRadius: [6, 6, 0, 0], // 圆角更明显
                    borderWidth: 1,
                    borderColor: 'rgba(45, 45, 45, 0.8)' // 深色边框
                },
                label: {
                    show: true,
                    position: 'insideTop', // 标签在柱体内部顶部
                    color: 'rgba(255, 255, 255, 0.9)',
                    fontSize: 12,
                    fontWeight: 'bold',
                    formatter: '{c}' // 直接显示数值
                },
                emphasis: { // 鼠标悬停效果
                    itemStyle: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(197, 164, 126, 0.5)'
                    }
                },
                animationDelay: function(idx) { // 渐显动画
                    return idx * 100;
                }
            }]
        };

        chart${loop.index}.setOption(option${loop.index});
        </c:forEach>

        // 窗口大小变化时自适应图表
        window.addEventListener('resize', function() {
            <c:forEach items="${stats}" var="courseStat" varStatus="loop">
            chart${loop.index}.resize();
            </c:forEach>
        });
    });
        // 初始化主题
        function initTheme() {
        const savedTheme = localStorage.getItem('theme') || 'dark';
        const isLight = savedTheme === 'light';
        document.body.classList.toggle('light-mode', isLight);
        document.querySelector('.theme-toggle').textContent = isLight ? '☀️' : '🌙';
    }

        // 切换主题
        function toggleTheme() {
        const body = document.body;
        const isLight = !body.classList.contains('light-mode');
        body.classList.toggle('light-mode');
        localStorage.setItem('theme', isLight ? 'light' : 'dark');
        document.querySelector('.theme-toggle').textContent = isLight ? '☀️' : '🌙';
    }

        // 页面加载时初始化
        window.addEventListener('load', initTheme);
</script>